<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index5.css" />
	</head>

	<body>
		<img src="img/p6-1.png" id="beijing" alt="" />
		<img src="img/yinyue.gif" / id="yingyue">
		<div id="box1">
			<!--请点击按钮开始计算-->
			<p id="p3">请点击按钮</p>
			<p id="p4">开始计算</p>
			<p id="p1"></p>
			<p id="p2"></p>
		</div>
		<div id="box">
			<span data-di="50" data-id="50">大豆</span>
			<span data-di="50" data-id="50">绿豆</span>
			<span data-di="50" data-id="50">红豆</span>
			<span id="s1">AC</span>
			<span data-di="100" data-id="100">稻子</span>
			<span data-di="100" data-id="100">玉米</span>
			<span data-di="100" data-id="100">黑豆</span>
			<span id="s2" data-di="+" data-id="0">+</span>
			<span data-di="0" data-id="0">软糖</span>
			<span data-di="0" data-id="0">雪糕</span>
			<span data-di="0" data-id="0">辣条</span>
			<span id="s3">=</span>
		</div>
		<div id="zhezhao123">
			<div id="zhezhao">

			</div>
			<img src="img/p7-2.png" / id="imgs">
			<p id="name">1</p>
			<p id="pice"></p>
			<p id="jieguo1">优</p>
			<p id="jieguo2">良</p>
			<p id="jieguo3">差</p>
			<div id="pinlun1">
				<strong class="str">优</strong>
				<p class="ps1">您的饮食习惯很好,</p>
				<p class="ps2">加上适当的运动,</p>
				<p class="ps3">身体会更棒。</p>
				<p class="ps4">希望您继续保持哟!</p>
			</div>
			<div id="pinlun2">
				<strong class="str">良</strong>
				
				<p class="ps1">您的饮食习惯正常,</p>
				<p class="ps2">还需多吃健康食品,</p>
				<p class="ps3">才能有足够精力工.</p>
				<p class="ps4">作学习哟!</p>
			</div>
			<div id="pinlun3">
				<strong class="str">差</strong>
				
				<p class="ps1">您的饮食习惯欠佳,</p>
				<p class="ps2">请多吃五谷杂粮,</p>
				<p class="ps3">少吃零食快餐才行哟!</p>
			</div>
		</div>
		<audio src="music/click.mp3" id="yy"></audio>
		<script src="css/cookie.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var audi=document.getElementById('yy')
			var zhezhao=document.getElementById('zhezhao123')
			var name = getCookie('taken')
			var names=document.getElementById('name')
			names.innerHTML=name
//console.log(names)
			var pice=document.getElementById('pice')
//			pice.innerHTML=100
			var jieguo1=document.getElementById('jieguo1')
			var jieguo2=document.getElementById('jieguo2')
			var jieguo3=document.getElementById('jieguo3')
			var pinlun1=document.getElementById('pinlun1')
			var pinlun2=document.getElementById('pinlun2')
			var pinlun3=document.getElementById('pinlun3')
			
			var p1 = document.querySelector('#p1')
			var p2 = document.querySelector('#p2')
			var p3 = document.querySelector('#p3')
			var p4 = document.querySelector('#p4')
			var span = document.querySelectorAll('span')
			var sum = 0
			for(var i = 0; i < span.length; i++) {
				span[i].ontouchstart=function(sum){
					var sum1 = sum.target
					sum1.style.opacity='0.8'
//					sum1.style.backgroundColor='red'
				}
				span[i].onmouseup=function(sss){
					var sss1=sss.target
					sss1.style.opacity='1'
				}
				span[i].onclick = function(res) {
					audi.play()
					//					console.log(span[i])
					p3.style.display = 'none'
					p4.style.display = 'none'
					p1.style.display = 'block'
					p2.style.display = 'block'
					
					var spans = res.target
					
					console.log(spans)
					var uid = spans.getAttribute('data-di')
					var uids = spans.getAttribute('data-id')
					console.log(uids)
					//					p1.innerHTML=uid
					p1.innerHTML += uid

					sum = sum + parseInt(uids)
					//					sum+=uids
					console.log(sum)
					span[11].setAttribute("data", sum)

				}
				span[11].onclick = function(res) {
					//					console.log(p1.innerHTML)
					var spans1 = res.target
					var uid1 = spans1.getAttribute('data')
					//					var sums=
					p2.innerHTML = uid1
					console.log(uid1)
					var uid2 = parseInt(uid1)
					pice.innerHTML=uid2
					console.log(uid2)
					zhezhao.style.display='block'
					if(0<uid2&&uid2<=50){
						jieguo3.style.display='inline-block'
						pinlun3.style.display='inline-block'
						
					}else if(50<uid2&&uid2<=150){
						jieguo2.style.display='inline-block'
						pinlun2.style.display='inline-block'
					}else if(150<uid2){
						jieguo1.style.display='inline-block'
						pinlun1.style.display='inline-block'
					}
				}
			}
			
		</script>
	</body>

</html>